<template>
	<view class="mine-container">
		<!--顶部个人信息栏1-->
		<nav-bar title="个人中心" bgColor="#FEEEE6" titleColor="#000" :showLeftIcon="false"></nav-bar>
		<view class="header-section">
			<view class="flex padding justify-between">
				<view class="flex align-center" v-if="userInfo">
					<image
						:src="userInfo.avatar"
						class="head-img"
						mode="aspectFill"
					/>
					<view class="user-info">
						<view class="u_title">
							{{ userInfo.userName }}
						</view>
					</view>
				</view>
				<view class="flex align-center" v-else>
					<view class="cu-avatar xl round bg-white">
						<view class="iconfont icon-people text-gray icon"></view>
					</view>
					<view @click="handleToLogin" class="login-tip">
						游客
					</view>
				</view>
				<view @click="clickToInfo" class="flex align-center">
					<text>个人信息</text>
					<view class="iconfont icon-right"></view>
				</view>
			</view>
			
			<view class="pic" style="width: 30rpx;height: 30rpx;" @click="clickMessage">
				<view class="box">
					<u-badge type="error" :max='num' :value="messageNum"></u-badge>
				</view>
				<image :src="baseIconUrl + 'icon_notice.png'" alt="" style="width: 30rpx;height: 30rpx;" />
			</view>
			
		</view>
		
		<view class="content-section">
			<view class="function-cards">
				<view class="membership" :style="{ background: `url(${baseImgUrl}img_vip_card.png) no-repeat` }">
					<view class="item-a">
						<text class="left">会员卡</text>
						<text class="right" @click='clickToMember'>{{ isMember ? '详情' : '申请'}}</text>
					</view>
					<view class="item-b" v-if="!isMember">
						<image class="img" :src="baseIconUrl + 'icon_un_smile.png'" alt="" />
						<text style="margin-left: 20rpx;font-size: 28rpx">您还不是会员</text>
					</view>
				</view>
				<view class="stored" :style="{ background: `url(${baseImgUrl}img_card_bg.png) no-repeat` }">
					<view class="item-a">
						<text class="left">储值卡</text>
						<text class="right" @click='clickStored'>详情</text>
					</view>
					<view class="item-b">
						<text style="margin-left: 20rpx;font-size: 28rpx;font-weight: 600;">余额</text>
						<text style="margin-left: 20rpx;font-weight: 700;">￥{{ cardTotal }}</text>
					</view>
				</view>
			</view>

			<view class="function-buttons">
				<view class="btn-item" @click="clickToPopup(0)">
					<image class="item-icon" :src="baseIconUrl + 'icon_small_coupon.png'" alt="" />
					<view class="item-text">优惠券</view>
				</view>
				<view class="btn-item" @click="clickToPopup(0)">
					<view class="item-num">{{ notUseCoupon }}</view>
					<view class="item-text status-name">未使用</view>
				</view>
				<view class="btn-item" @click="clickToPopup(2)">
					<view class="item-num">{{ useCoupon }}</view>
					<view class="item-text status-name">已使用</view>
				</view>
				<view class="btn-item" @click="clickToPopup(4)">
					<view class="item-num">{{ expireCoupon }}</view>
					<view class="item-text status-name">已过期</view>
				</view>
			</view>

			<view class="cell-group">
				<view class="cell-item" @click="clickour">
					<view class="left">
						<view class="icon">
							<image class="icon-img" :src="baseIconUrl + 'icon_prompt.png'" alt="" />
						</view>
						<view class="title">关于我们</view>
					</view>
					<view class="right"></view>
				</view>
				<view class="cell-item" @click="clickidear">
					<view class="left">
						<view class="icon">
							<image class="icon-img" :src="baseIconUrl + 'icon_edit.png'" alt="" />
						</view>
						<view class="title">意见反馈</view>
					</view>
					<view class="right"></view>
				</view>
				<view class="cell-item" v-if="token" @click="clickLogout">
					<view class="left">
						<view class="icon">
							<image class="icon-img" :src="baseIconUrl + 'icon_logout.png'" alt="" />
						</view>
						<view class="title">退出登录</view>
					</view>
					<view class="right"></view>
				</view>
			</view>
			<button
				v-if="!token"
				@click="clickToLogin"
				class="login-btn cu-btn block bg-blue lg round"
			>我要登录</button>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/nav-bar/index.vue'
	import { getToken } from '@/utils/auth'
	import api_mine from '@/api/mine'
	import api_storedCard from '@/api/storedCard'
	import api_membership from '@/api/membership'
	import pageConfig from '@/config'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				baseIconUrl: pageConfig.baseIconUrl,
				baseImgUrl: pageConfig.baseImgUrl,
				userInfo: null,
				isMember: false,
				notUseCoupon: 0,
				useCoupon: 0,
				expireCoupon: 0,
				cardTotal: 0,
				token: getToken(),
				messageNum: 100,
				num:'',
			}
		},
		onShow() {
			this.userInfo = uni.getStorageSync('userInfo')
			if(this.userInfo){
				this.getCouponNumber()
				this.getStoredCardAccount()
				this.getMember()
				this.noticeList()
			}
		},
		methods: {
			noticeList(){
				api_mine.noticeList().then(res=>{
					this.num=res.rows.length
				})
			},
			getStoredCardAccount() {
				api_storedCard.fetchStoredList().then(res => {
					if (res.code !== 200) return
					this.cardTotal = res.data.sumMoney
				})
			},
			getCouponNumber() {
				// api_mine.fetchCouponList({ status: 0 }).then(res => {
				// 	if (res.code !==200) return
				// 	this.notUseCoupon = res.total
				// })
				// api_mine.fetchCouponList({ status: 2 }).then(res => {
				// 	if (res.code !==200) return
				// 	this.useCoupon = res.total
				// })
				// api_mine.fetchCouponList({ status: 3 }).then(res => {
				// 	if (res.code !==200) return
				// 	this.expireCoupon = res.total
				// })
				api_mine.queryUserCouponClassifyCount().then(res => {
					if (res.code !==200) return
					this.notUseCoupon = res.data.unUsedNumber
					this.useCoupon = res.data.usedNumber
					this.expireCoupon =res.data.expiredNumber
				})
			},
			getMember() {
				api_membership.fetchMemberList().then(res => {
					if (res.code !==200) return
					this.isMember = res.data.zyMemberList.length
				})
			},
			// 用户信息
			clickToInfo() {
				this.$tab.navigateTo('/subPages/mine/userInfo/index')
			},
			// 会员
			clickToMember() {
				this.$tab.navigateTo('/subPages/membership/index')
			},
			// 储值卡
			clickStored() {
				this.$tab.navigateTo('/subPages/storedCard/index')
			},
			//关于我们
			clickour(){
				this.$tab.navigateTo('/subPages/commonPage/our/our')
			},
			//意见反馈
			clickidear(){
				this.$tab.navigateTo('/subPages/commonPage/idea/idea')
			},
			// 优惠券，
			clickToPopup(status) {
				this.$tab.navigateTo(
					`/subPages/coupon/index?status=${status}`
					)
			},
			// 前往消息通知
			clickMessage() {
				this.$tab.navigateTo('/subPages/mine/message/notification')
			},
			
			clickLogout() {
        this.$modal.confirm('确定注销并退出系统吗？').then(() => {
          this.$store.dispatch('LogOut').then(() => {
            this.$tab.reLaunch('/subPages/commonPage/login')
          })
        })
      },
			clickToLogin() {
				this.$tab.reLaunch('/subPages/commonPage/login')
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f6f7;
	}
	.head-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 80rpx;
		overflow: hidden;
		background-color: #fff;
	}

	.mine-container {
		width: 100%;
		.menu-list {
			border-radius: 32rpx;
		}

		.header-section {
			padding: 15px 15px 45px 15px;
			background-color: #FEEEE6;
			color: black;
			position: relative;

			.pic {
				position: absolute;
				top: 10px;
				right: 30px;
			}

			.box {
				position: absolute;
				top: -10px;
				right: -24px;
				width: 30px;
				height: 20px;
				border-radius: 15px;
			}

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}

			.cu-avatar {
				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;

				.u_title {
					font-size: 18px;
					line-height: 30px;
				}
			}
		}

		.content-section {
			position: relative;
			top: -50px;

			.function-cards {
				display: flex;
				justify-content: space-around;
				margin: 15px 15px;

				.membership {
					width: 48%;
					height: 170rpx;
					border-radius: 25rpx;
					background-size: cover !important;
					background-position: center !important;

					.item-a {
						height: 100rpx;
						line-height: 100rpx;
						color: rgba(194, 126, 21, 1);
						font-size: 30rpx;
						font-weight: 500;

						.left {
							margin-left: 60rpx;
						}

						.right {
							margin-left: 60rpx;
							border: 1px solid rgba(194, 126, 21, 1);
							border-radius: 16rpx;
							font-size: 24rpx;
							padding: 6rpx 16rpx;
						}
					}

					.item-b {
						display: flex;
						color: #F2D19E;

						.img {
							margin-left: 10rpx;
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				.stored {
					width: 48%;
					height: 170rpx;
					border-radius: 25rpx;
					background-size: cover !important;
					background-position: center !important;

					.item-a {
						height: 100rpx;
						line-height: 100rpx;
						color: black;
						font-size: 30rpx;
						font-weight: 500;

						.left {
							margin-left: 60rpx;
						}

						.right {
							margin-left: 60rpx;
							border: 1px solid rgba(0, 0, 0, 1);
							border-radius: 16rpx;
							font-size: 24rpx;
							padding: 6rpx 16rpx;
						}
					}
				}
			}

			.function-buttons {
				// width: 95%;
				// margin: 0 auto;
				margin: 15px 15px;
				padding: 20px 0px;
				border-radius: 10px;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				margin-bottom: 16rpx;
				background-color: #fff;
				position: relative;

				.btn-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 25%;

					.item-icon,
					.item-num {
						display: flex;
						align-items: center;
						height: 60rpx;
						margin-bottom: 20rpx;
						font-size: 36rpx;
						color: rgba(194, 126, 21, 1)
					}
					.item-icon {
						width: 60rpx;
					}

					.item-text,
					.status-name {
						font-size: 14px;
						font-weight: 400;
						letter-spacing: 0px;
						line-height: 20.27px;
						color: #333333;
						text-align: left;
						vertical-align: top;
					}
					.status-name {
						color: #808080;
					}
				}
			}

			.button {
				width: 92%;
				padding: 20px 0px;
				margin: 0 auto;
				height: 50rpx;
				background-color: rgba(194, 126, 21, 1);
				border-radius: 32rpx;
				color: #fff;
				text-align: center;
			}

			.login-btn {
				width: 92%;
				margin: 0 auto;
				background-color: rgba(194, 126, 21, 1);
				margin-top: 40px;
				height: 45px;
				color: #fff;
			}

			.cell-group {
				margin-top: 30rpx;
				background-color: #FFF;
				margin: 15px 15px;
				border-radius: 32rpx;

				.cell-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 0 30rpx;
					height: 120rpx;
					border-bottom: 2rpx solid #F4F6F8;

					&:last-child {
						border-bottom: none;
					}

					.left {
						display: flex;
						align-items: center;

						.icon {
							width: 88rpx;
							height: 48rpx;

							.icon-img {
								width: 48rpx;
								height: 48rpx;
							}
						}

						.title {
							font-size: 32rpx;
							color: #222;
						}
					}

					.right {
						border: 12rpx solid transparent;
						border-left-color: #d3d3d3;
					}
				}
			}
		}
	}
</style>